<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <introduce :title="msg"></introduce>
    <hr>
    <for-component :items="lessons"></for-component>
</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //局部组件
    const introduce = {
        template:"<h1>{{title}}</h1>",
        props:['title']
    };

    const forComponent = {
        template: "<ul><li v-for='item in items'>{{item}}</li></ul>",
        props:{
            items:{
                type: Array,
                default: ['java']
            }
        }
    }
    const app = new Vue({
        el:"#app", //element,vue作用的标签
        data:{
            msg:"大家好，我是渣渣辉！",
            lessons:['java','php','python']
        },
        components:{
            introduce,forComponent //ES6中，一个对象的key和value完全一致，可以简写为key counter: counter
        }
    });
</script>
</body>
</html>